研习设订阅号

设计干货 杜绝注水

大家好，我是小凹，是的，你没看错，又是我~们！

上一期我们发布了一篇关于PS技法的教程，反响非常热烈！

大家似乎对于技法类的教程“情有独钟”，所以善良的我，又出现了，这期打算继续给你们分享一个，制作文字效果的网站，并且它还可以设置动态的样式，让你的海报动起来，来，网址先给你们

spacetypegenerator.com

我们先看看，

东宁老师用它设计的海报是什么样子的吧？

想知道我们怎么设计的这几张动态海报吗？那就跟着我继续学习今天的教程吧！

打开之后，是这样一个页面，这里很多选项和按钮，你可以随意的调整，先玩一哈，就大概了解这个网站的功能了。

这个网站，我们可以称之为“空间类型生成器”，开发者是这位大佬。

他叫Kiel Mutschelknaus，这位设计师是在读研究生期间自学的3D和编程，创建了这个网站，经过这几年不断的更新，现在这个网站非常强大，想要彻底弄明白里面的各种效果，就相当于学了一个新的软件，所以，希望大家今天可以跟着我的思路，打开网站，边看边学，这样才能更好的吸收。

接下来，

我们来深入了解这个网站的功能，

从而为我们设计服务。

网站包含5个功能分区

现在总共有11个空间类型，随着作者的不断开发，类型会有所增加，所以大家平时可以多关注这个网站，说不定什么时候大佬就更新了。

我们先来看看第一个立体空间类型——圆筒，这个也是我们打开网页之后默认的类型，首先我们看看它的参数设置都代表了什么

先看第一部分的四个，是基础调整，分别对应的是：

圆形的半径，数值越大，圆环越大；

圆形的个数，数值越大，楼层越多；

旋转的速度和方向，默认数值是-5，向左调整越大，圆环就向左旋转并且越快速，向右调整越大，圆环就向右旋转并且越快速；

最后每一层的圆柱偏移方向。

第二部分是7个调整命令，分别是：

波浪的个数，这个是在下面几项调整后再调整它会有明显的效果，默认是2，数值越大，波幅越多；

波浪的速度，数值越大，起伏越快；

下面是经度纬度，数值越大，经纬度的文字变化越大；

波纹，数值越大，起伏越多；

XY刻度上的文字，长度和高度。

这部分就是对文字本身的调整了，X越大，文字越宽，Y越大，文字越高，重量就是文字的粗细，这部分三个选项和上面的XY轴对字体的变化是不一样的。

这部分是在上面所有都调整好之后，对XYZ轴上文字的方向变化的设置。

这部分就很简单了，主要是对于视角的调整，想要什么视角直接调整参数即可。

左上角两个色块，是可以替换主体颜色和背景色的，最上方有个pride（自豪），应该是作者提供的色彩参考，是一个彩虹色渐变。

看下它们的动画效果

simple

简单

Jellyfish

水母

Crown

王冠

Complex

复杂

Weave

编织

Hoops

铁环

上面红色区域，是文字内容，把你想要的文字信息输入进去即可，当然，这里只能输入英文的，并且字体没得选，（不过，后面有几个空间类型是可以输入日文和韩文还有中文的）

下面蓝色块，点击之后会有窗口弹出，显示的大概意思是，如果你想使用这个网站，可以把做完的作品发给他的邮箱，得到允许方可商用，以及后续他会添加其他字体进来，完善这个网站。

第二个空间类型——领域

第一部分的四个，是基础调整，分别对应的是：

网格的栏数，数值越大，文字的长度就越长，

字距和行距就比较好理解了，和我们使用的软件逻辑是一致的。

第二部分主要是文本的调整

X范围是横向进行调整，注意这里是直接拉动文本框，数值越大，文字被拉动的幅度就越大。

Y范围是竖向进行调整，数值越大，文字被竖向拉动的幅度就越大。

字重这里和平时使用的软件是一样的。

第三部是对动画的调整

在三维的空间里面除去X轴和Y轴还有一个深度的Z轴，所以我们在调整的过程中，就可以调整出三维的效果。

stack

堆叠

bricks

砖块

simple

简易

complex z

复杂Z

zebra

斑马

harlequin

花斑

领域里总共有6个动画预设，在此基础上调整文字和一些参数，就可以作为自己画面的主体或者背景了。

文案方面，选择了《微风吹来少年的心事》这本书，并为其设计一款配套动态海报，为了还原出那种被风微微吹动的视觉效果，经过反复的尝试后，终于找到了最适合它的设置参数。另外，版面的构成也是影响画面情绪重要元素。标题通过错落的编排去呈现，是为了模仿风的无形与变化莫测。其余的元素也尽量预留出更多的留白空间，让整体显得更加透气一些。

这个例子的参数设置其实比较直观，上方基本的改动，实际上是在调整文字的大小、距离、粗细等属性。而决定它要怎样去运动的，是下方的两个属性，分别是X轴和Z轴上的平滑运动，需要注意的是，运动的幅度会影响我们对“风"力大小的判断，如果是微风的话，抖动的幅度就不要太大。

不仅仅是对于参数的设置，在设计的很多领域里，都证明了“少即是多”都重要性。所谓贪多嚼不烂，我们在接触新事物都时候，内心多少会有一种把所有新鲜要素都用上都冲动，不过，相信我，真正成熟的做法，是了解每个命令的优缺点，然后针对不同的应用环境，去斟酌和精简，克制的运用它们。最终会得到更好的效果。

第三个空间类型——条纹

第一部分依旧是文本的调整

X范围是横向进行调整，注意这里是直接拉动文本框，数值越大，文字被拉动的幅度就越大。

Y范围是竖向进行调整，数值越大，文字被竖向拉动的幅度就越大。

跟踪部分可以调整文字的字距。

数量是可以规定画面中的丝带的数量，

X空间和Y空间是让整个图形在三维空间进行旋转，

丝带的大小也可以通过命令进行调整。

动画的速度和波动的激烈程度可以在这个部分进行调整。

marquee

遮檐

subway

地铁

wow

哇哦

stacks

堆叠

OLD SEA 黑白海洋

color sea 彩色海洋

simple wave

简单波纹

simple wave

简单波纹2

not so werid

不是太怪

racer

赛车旗帜

丝带这部分的动画预设都比较动感，建议大家在使用的时候不要用预设好的颜色，因为颜色过多，很容易让你的设计画面不受控制。我个人比较喜欢“地铁”的动画预设，设置的好，可以让画面变得很时髦。

第四个空间类型——线圈

X范围和Y范围分别是调整字体的高度和宽度，调整后整个矩形环也会随着发生改变。

这个部分可以调整图形的矩形数量，和每一个宽度，还有端点可以进行调整选择是否使用圆角。

调整半径同样可以改变圆环的大小，注意这不会改变文字的大小和形状，起始位置是从内向外更改圆环的大小，旋转次数默认是1，数值越大旋转的速度越高。

如果感觉单纯的圆环转动有些单调，可以尝试使用这个部分的命令，可以给圆环增加一些波动的属性在里面。这里的尺寸、数量和速度都是设定的波动的属性。

wide

宽广

super

超级

amoeb

变形虫

spacer

隔档

kitty 凯特

hourglass 沙漏

star

星星

Zztar

异形星

pretzel

糖果混合效果

lemniscate

柠檬

有点爱线圈这里的动画预设，尤其是沙漏后面的几个，都是可以作为画面主形象而存在的，比如这部分的小标题我就是用的Zztar来调整的。

第5个空间类型——旗帜

X长度和Y长度同样是调整单个文字的长度和宽度，数值越大效果越明显。

行数是调整整个图形的高度的。 

最后一个数值是可以进行文字的大小的调节，注意这里的调整是不改变文字的间距，是直接将文字在原文进行大小的调整的。

波动的调整就和前面的效果是一样的，

排数抵消可以在不改变整体高度的情况下，让整个画面由平滑的效果变成较为尖锐的效果。

a banner

横幅

a twist

扭转

folds

褶皱

flat sea

平坦的海面

barber

理发师

silos

筒仓

mystery

神秘

origami

折纸

cola wave 可乐波

origami

折纸2

B&W

黑白

newsprint

新闻纸

edge case

边缘盒

它的预设很像，「条纹」和「领域」空间类型的预设结合，这里它默认的预设图像都比较夸张，大家用的时候要适当的调整，虽然这里不能调整字体，但是如果作为一个动画来说，你可以试试不用文字，选择标点符号，或者一系特殊符号，有可能会得到一个不错的的动画效果。

第6个空间类型——森泽

这个效果很适合文字很多的内容进行编排，这里的命令相对来说比较简单，都是在调整文字的关系。可以参考图片上的翻译。

卷屏速度是设定动画的速度，数值越大，速度越快。

蒙版这里是设置动画的宽度，数值越大，动画的宽度越小。

后置空间 post space

bridge 桥梁

beach 海滩

moon 月亮

whitney 惠特尼

recede 逐渐变小

相信大家看了「森泽」的预设，会满脑袋问号，这好像一堆代码啊，其实这也是它区别于其他空间类型的地方，它这里可以以符号（字母）代替，做出不同的动画图形，适合大面积文本信息和抽象类的设计。

这个部分主要是对文本进行一个调整，和前面的命令都是相似的，X范围是对文字的长度进行调整。字符的宽度是调整文字的字间距。

到了这个部分是对动画的整体进行调整，主要是调整动画的激烈程度。

checker

校对人

cascade

瀑布

classic

经典

mosaic

马赛克

ticket

票据

run

跑步

salmon

发廊

gird

网格

web art 网络艺术

sparkle

闪耀

pixel gradient

像素过渡

和「森泽」有点像，都是不走寻常路的预设，只不过它这里会以马赛克的形式为主，还有一些射线的波动，适合做背景的大面积图像，从“发廊”之后，可以尝试以空格或者符号来代替字符，你会得到很多惊喜。

第8个空间类型——丝带

第一部分也是基础的调整：

段间距：数值越大，行距越宽松，彩带间距也随之变大。

段计数：数字越小段落越多，数字越大段落越少，转折也就越少。

字体高度：数值越大，字体越高。

跟踪：这个其实是字体的宽窄，数值越小，字体越窄，最后会变成一条线。

笔画的类型：相当于笔画的粗细，调整文字的字重。

速度就是彩带漂浮变化的速度，越大，速度越快。

这部分主要针对色带的调整：

色带高度：数值越大，色带越高

色彩拉伸：数值越大，拉伸越长

色带计数：数值越大，色彩的层数越多

色带间距：层数拉开的距离，越大距离越大

色带偏移：错开的距离，越大错位越大，在0和2的时候色带是对齐的，中间数值会让色彩产生错落感。

它下面有个候补，点选之后会给你一个随机的错落感。

比例：就是图像缩放的大小，越大图像在画面也就越大

左上角，一个是储存按钮，它可以存储GIF格式的图片，一个是色彩的设置，可以选择给彩带设置渐变色或者纯色，每一面的颜色是可以单独设置的。

Basic

基本

Streamers

彩带

Terrace

梯田

Link

链接

Sea

海洋

River

河流

Web Art

网络艺术

Primary

初级

Snake

蛇

Hot / Cold

冷暖渐变

Track

轨道

Track II

轨道2

丝带这个命令，顾名思义，能够带来类似丝带的效果。

但是我偏偏不想让它像这样直接呈现，

因为视觉传达的核心始终是内容，

而非酷炫的形式，在寻找内容的同时，

我也在考虑怎样将这个效果简化处理，并且

能够让我的文案信息与之匹配。

反标签，本身是一个带有比喻性质的标题。不过在视觉表现上，这种比喻也是可以通过动画来实现具象表达的。动态的方形色块，被我赋予了“标签”的含义，而上面的文字“label”也会随着标签的流动而随之反转。这很直观，也很有抵制偏见的属性在里面。在版式编排上，我也试图打破那种标题在上，内容在下的刻板印象，将大部分的内容整合到一块视觉面积上。在年轻又富有活力的色彩烘托下，给人一种耳目一新的视觉感受。

参数的调整思路主要是，加大线段的对比，让绕转的字数减少，并且间距加大。同时将色块的比例控制在接近1：1的方形尺寸下，让文字变粗，并且在色块内设置一个版心的大小。

在呈现的视角中，把Y和Z轴的数值拉满，并且微调了X轴的角度，让画面呈现出最简化的正视角度。调整的过程需要不断反复尝试，才能得到自己想要的效果。随着字数的增加和减少，呈现出来的效果其实也并不一样，所以这里的数值是仅供参考的，大家可千万别死记硬背，重要的是理解规律。

第9个空间类型——层次

这个是带有一些字体选择的，上部分的设置：

层数越多，纵深的楼层也就越多；字号，就是字体大小，内部高度，就是上下两边的高度，内部宽度，左右两边的宽度；旋转默认是8，越向两边，旋转的角度越少。

Speed Racer 极速赛车手

To Space

前往太空

나선형의 것

螺旋形

Lost Time 失去的时间

Dot Spiral 点螺旋线

Be ggressive 积极进取

Meat Space 肉空间

相信很多同学在网上都看到过类似的动态海报，以为只能用AE实现。其实，这个空间预设，毫不夸张的说，每一屏截下来都可以作为一张海报了，只不过字体方面没有太多选择。

第10个空间类型——危险

“危险”这个空间类型，可调整的按钮比较少，上部分五个，分别是：

速度：和前面一样，数值越大，动作越快；

大小：指的是破碎斑驳的大小，数值为0时，没有任何变化；

列：向左或向右都可以加重破坏力度；

复杂：破坏的复杂性；

行：向左是水波纹的效果，向右是支离破碎的效果，都是在横向上破坏的力度加大。

下部的几个设置按钮也非常简单

设置文本内容，选择字体（可算有字体选择了），还有针对字体的大小和行距进行调整，颜色可以和背景反向。

All yours

都是你的

Just OK

还可以

Not so good

不太好

Cheer

欢呼

Date 日期

Hopes

希望

Circle

圆

这里大家设置文字信息的时候，如果是一句话，尽量设置成有长短变化的文字组，包括这里默认的文字组，都是很注意长短节奏的变化，建议大家可以参考。

老话说，好戏都在后头呢，这个网站完全印证了，这里11个空间类型，最后这个是我个人最喜欢的，因为它自带“钢笔工具”，可以随意造型，甚至是设计文字。

第11个空间类型——串联

因为最后这个功能较多，所以每一部分，我都给大家拆解出来，这样更易懂

第一行的英文，告诉你，你想新起一个锚点，你就在鼠标没落下的地方，按下回车键，这样就是单独的一条线了。

还有字体选择里面，这次包含了各种语言，终于可以打中文字了，而且是免费的思源黑体，以及日文的思源黑体粗字重。

色带的数值越大，宽度越宽，色带条数默认是1，数值越大，条数越多，轮廓描边是根据条数描白边或者黑边，最后一个是点选圆角端点。

这部分就厉害了，可以选择任何一种模式，可以是渐变，文本，条状，还有所有模式的混合，这对于我们设计师来说太强大了。

对于色彩也给了很多选择，五个渐变节点可选，你想要什么渐变都可以满足你，背景色前景色也是可以改变的哦。

Vote 投票

Tracks 轨道

Dream-aqer

梦境者

Juicy

多汁的

Yes &

是

Guts

胆量

Eels wind 鳗鱼风

Reset Points 重置点

「重置点」是针对上面所有预设的基本款，在这里你等于新建一个画面，去添加锚点，绘制图形，作者大大太贴心了。

串联这个命令给我的印象，

就是一个大号的贝塞尔曲线工具，虽然没有办法

调整角点，但是已经可以轻松勾勒图形了，

不过有一个问题需要注意的是，

我发现这个工具好像不能删除节点！

我在调整造型的时候，就遇到过好几次这种情况，

明明调整好造型了，

但是手一滑，就要悲剧的重新来过了。

这是一本科幻书籍的宣传海报，名字是交错的世界，如果想体现这个交错的概念，选择“串联”这个命令感觉就很不错。我特别喜欢它拐点的位置，那种文字变形的视觉。在造型上，我并没有选择特别复杂的样式，因为我会觉得作为科幻题材，要做的其实是“减法”才对。除此之外呢，为了表现这种未来感，我也使用了黑白两色，让版面显得客观，并且理性的印象。为了贯彻这个精简的概念，层级划分上，也是尽量克制的使用对比，希望能够借由这样的画面，让内容更好的传达。

在这个案例中的参数设置的操作其实并不算困难，主要就是选择了描边和黑白的配色，重点部分主要在随后的贝塞尔工具的运用上。

小贴士

如果你使用了mac端自带的录屏工具（Shift+command+5），那么就需要手动修改文件的扩展名了。经过测试，ps软件可以成功拖进去.MP4格式的视频文件。

另外，录屏的时机也很重要，如果是设计类似的文字效果，就需要让起始点和终点的画面能够正常衔接，所以一定要把这些都录制进去，更细节的调整就需要在软件里去剪辑了。

把视频拖动到PS的界面里之前，需要先打开窗口命令下的时间轴。我们可以在这个时间轴的窗口里适当裁剪动画的长度。

接下来，就是把录制好的视频拖动到PS软件里去排版了。扔到界面后，你会发现它是上图这样婶儿滴，这时千万不要慌，在点一下回车键。我们就得到了一个类似图片的“东西”了。因为这个画面的边界部分是没有动画的，所以我给它加了一层蒙版，这样一来，背景色部分就被去掉了，成为了一个退底的视频。

最后，在文件命令下，找到导出-储存为web所用格式（旧版）这个命令。就可以正常得到一张动态的海报图了，是不是很简单呢？

看完11个空间类型，是不是感觉这个网站非常的强大，可以帮助我们解决很多技术上的问题，不过，可能很多同学的思路还没有打开，这里我们看看作者本人，利用网站做的一些设计吧

是不是又颠覆了自己对这个网站的认知，所以，不如大家自己多去实践看看吧！

以我对你们的了解，

你们看到这一定会有几个问题：

1、录屏用什么软件？

MAC用的是自带的，上面文章里已经说过了。

PC用的是这个网站

https://www.apowersoft.cn/

free-online-screen-recorder

他可以在线录屏，录好的视频直接可以转存为GIF格式，非常简单，自己捣鼓一下就明白了。

2、为什么我用PS时间轴，明明步骤一样，结果却不一样？

因为我看不到大家界面的样子，没法指点哪个环节出错了。不过，我在这里保证，以后一定出个专门针对于PS时间轴的教程。

各位看官，这次订阅号给大家带来的超级“神器”，不知你们是否喜欢，文章虽长，但是旨在把软件给大家弄的明明白白的，建议你可以配合网站，一起食用。

本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：研习设！